<template>
	<div>
		<div style='background: #fff;padding:40px 40px 16px 40px'>
			<p class='content-head'>应用设置</p>
			<Form :label-width='90'>
				<FormItem label='应用名称'>
					<p slot='label'><span class='star'>*</span>应用名称</p>
					<Input v-model='name' :maxlength="20" placeholder="请输入应用名称" style="width: 500px;"></Input>
					<span class='config-btn' @click="delApp">删除</span>
				</FormItem>
				<FormItem label='' style='margin-top: -34px'>
					<div class='btn btn-reset btn-hover' @click='resetBtn' style='margin-bottom: 0'>提交</div>
				</FormItem>
			</Form>
		</div>
		<div style='background: #fff;padding:40px 40px 16px 40px;margin-top: 16px'>
			<p class='content-head'>应用信息</p>
			<Form :label-width='80'>
				<FormItem label='APPID'>
					<Input v-model='appid' readonly style="width: 500px;"></Input>
				</FormItem>
				<FormItem label='APPKEY'>
					<Input v-model='appKey' readonly style="width: 500px;"></Input>
					<span class='config-btn' @click="getAppkey">重置</span>
				</FormItem>
				<FormItem label='云引擎'>
	            	<i-switch size="large" v-model='engine' @on-change='engineToggle' :disabled='version_icon!=3' :class='{"engine-switch":version_icon!=3}'>
				        <span slot="open">开启</span>
				        <span slot="close">关闭</span>
				    </i-switch>
	            </FormItem>
			</Form>
		</div>
		<div style='background: #fff;padding:40px;margin-top: 16px'>
			<p class='content-head'>计费套餐</p>
			<div style='width: 570px'>
				<Card class='version' @click.native='selectVersion(index,item)' v-for='(item,index) in chargeList' :key='index'>
	            	<Icon type="checkmark-circled" class='version-icon' style='font-size:28px' v-if='version_icon==item.id'></Icon>
	            	<Icon type="ios-circle-outline" class='version-icon' color='#d7dde7' v-else></Icon>

	            	<div class='version-wrap'>
	            		<div style='font-size:18px;color:#464C5B'>{{item.type}}</div>
	            		<div style='color:#657180'>{{item.subtitle}}</div>
	            	</div>
	            </Card>
			</div>
            <a class='version-price' href='https://cloud.qingful.com/doc/#/zh-cn/feeScale' target='_blank'>查看定价方案</a>
		</div>
		<!-- 删除应用 -->
		<Modal v-model="modal" width="600">
	        <p slot="header">
	            <span>删除应用</span>
	        </p>
	        <div style='margin-bottom: 24px'>
	            <Form label-position='top'>
                    <FormItem label='请填写应用全名以确认'>
                    	<p slot='label' style='font-weight:bold'><span class='star'>*</span>请填写应用全名以确认</p>
                    	<Input v-model='app_name' placeholder='请输入应用名称'></Input>
                    </FormItem>
                </Form>
                <div>
                	注意：应用删除后数据<span style='color:#f04134'>不可恢复</span>，请谨慎操作
                </div>
	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' @click="sure">确认</button>
	        </div>
	    </Modal>
	    <!-- 切换版本 -->
	    <Modal v-model="version_modal" width="600">
	        <p slot="header">
	            <span>切换到【{{versions}}】</span>
	        </p>
	        <div style='margin-bottom: 24px'>
	            <Form label-position='top'>
                    <FormItem label='请填写应用全名以确认'>
                    	<p slot='label' style='font-weight:bold'><span class='star'>*</span>请填写应用全名以确认</p>
                    	<Input v-model='app_name' placeholder='请输入应用名称'></Input>
                    </FormItem>
                </Form>
	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' @click="changeVersion">确认</button>
	        </div>
	    </Modal>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				name:'',
				appid:'',
				appKey:'',
				id:0,
				engine:false,
				modal:false,
				app_name:'',
				chargeList:[],
				chargesId:0,
				version_icon:0,
				charges_id:0,
				version_modal:false,
				versions:'',
				chargeId:0
			}
		},
		created(){
			this.getData()
			this.fetch('/home/charges').then(res=>{
				if(res&&res.data.data&&res.data.code){
					this.chargeList = res.data.data;
					this.chargesId = this.chargeList[0].id;
				}
			})
		},
		methods:{
			getData(){
				this.fetch('/home/app/config/baseConfig').then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.id = res.data.data.id;
						this.name = res.data.data.name;
						this.appid = res.data.data.appid;
						this.appKey = res.data.data.appkey;
						this.engine = res.data.data.engine ? true : false;
						this.version_icon = this.charges_id = res.data.data.charges_id;
					}
				})
			},
			//重置appkey
			getAppkey(){
                this.$Modal.confirm({
                	title:'提示',
                	content:'确定重置appkey吗？',
                	onOk:()=>{
                		this.fetch('/home/app/config/getKey').then(res => {
							if(res && res.data.code && res.data.data){
								this.appKey = res.data.data;
								this.$localStorage.set('appkey',this.appKey);
								this.$bus.emit('refreshApp',1)
							}
						})
                	}
                })
			},
			//是否开启云引擎
			engineToggle(){
				let status = this.engine ? 1 : 0;
				this.fetch('/home/app/engine/switch?engine='+status).then(res=>{
                    if(res&&res.data.data){
                        this.$Message.success(status?'云引擎已开启':'云引擎已关闭')
                    }
                })
			},
			resetBtn(){
				if(!this.name.trim()){
					this.$Message.warning('应用名称不能为空');
					return;
				}
				this.fetch('/home/app/config/reset',{
					id:this.id,
					name:this.name.trim(),
					appKey:this.appKey
				}).then(res=>{
					if(res&&res.data.data&&res.data.code){
						localStorage.setItem('app_name', res.data.data.name);
						this.$Message.success('提交成功！')
						this.$bus.emit('refreshApp',1)
					}
				})
			},
			//删除应用
			delApp(){
				this.app_name = '';
				this.modal = true;
			},
			sure(){
				if(!this.app_name){
					this.$Message.warning('请填写应用名称');
					return;
				}
				this.fetch('/home/appDelete',{
					baasId:this.id,
					name:this.app_name
				}).then(res=>{
					if(res&&res.data.code){
						this.$Message.success(res.data.data)
						this.modal = false;
						this.getData()
					}
				})
				
			},
			cancel(){
				this.modal = false;
				this.version_modal = false;
			},
			selectVersion(index,item){
				this.app_name = '';
				if(item.id == this.charges_id){
					return;
				}
				this.version_modal = true;
				this.versions = item.type.split('（')[0];
				this.chargeId = item.id;
			},
			//切换版本
			changeVersion(){
				if(!this.app_name){
					this.$Message.warning('请填写应用名称');
					return;
				}
				this.fetch('/home/app/config/switchCharge',{
					chargeId:this.chargeId,
					name:this.app_name
				}).then((res)=>{
					if(res&&res.data.data){
						this.getData()
						this.version_modal = false;
					}
				})
			}
		}
	}
</script>
<style scoped>
	.btn-reset{
		width:84px;
		height:36px;
		line-height:36px;
		border-radius: 18px;
		margin-top: 34px;
	}
	.config-btn{
		color: #06A0fD;
		padding-left: 10px;
		cursor:pointer;
	}
	
</style>
<style>
	.content-head{
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 30px;
		color:#464C5B
	}
</style>